<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" style="min-height: 550px">
          <div class="head-container">
            <div class="app-container-header">
              <el-input v-model="queryForm.blurry" placeholder="请输入模板名称" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="query" />
              </el-input>
            </div>
            <div class="app-container-button" style="margin-top: 10px">
              <div class="crud-opts">
                <span class="crud-opts-left">
                  <el-button
                    class="filter-item"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="toAdd"
                  >
                    新增
                  </el-button>
                  <el-button
                    class="filter-item"
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="toDelete"
                  >
                    删除
                  </el-button>
                </span>
              </div>
            </div>
          </div>
          <div class="app-container-table">
            <el-table
              ref="table"
              v-loading="loading"
              :data="dataList"
              highlight-current-row
              style="width: 100%;"
              @selection-change="selectionParentChangeHandler"
              @row-click="parentRowClick"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column :show-overflow-tooltip="true" prop="name" label="模板名称" />
              <el-table-column :show-overflow-tooltip="true" prop="tempName" label="模板编码" />
              <el-table-column :show-overflow-tooltip="true" prop="ssdl.title" label="所属大类" />
              <el-table-column :show-overflow-tooltip="true" prop="ssfl.title" label="所属分类" />
              <el-table-column
                label="操作"
                width="130px"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="toDelete(scope.row)" />
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="queryForm.page"
              :page-size="queryForm.size"
              :total="pagerSize"
              style="margin-top: 8px;"
              layout="total, prev, pager, next, sizes"
              @current-change="handleParentCurrentChange"
              @size-change="handleParentSizeChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="min-height: 550px">
          <setting-template ref="setting" @fetch-data="settingBack" />
        </el-card>
      </el-col>
    </el-row>
    <tpl-entity ref="entity" @fetch-data="fetchDataEntity" />
  </div>
</template>
<script>
import TplEntity from './component/entity';
import SettingTemplate from './setting';
import { queryAllByPager } from '@/api/tp/tpl/index';
export default {
  name: 'TemplateManagerIndex',
  components: { TplEntity, SettingTemplate },
  data() {
    return {
      pagerSize: 0,
      loading: false,
      dataList: [],
      queryForm: {
        blurry: '',
        page: 1,
        size: 10
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      queryAllByPager(this.queryForm).then(res => {
        this.loading = false;
        const { data } = res;
        this.dataList = data.data;
        this.pagerSize = data.pagerSize;
      }).catch(() => {
        this.loading = false;
      });
    },
    toAdd() {
      this.$refs.entity.openEntity();
    },
    toEdit(data) {
      this.$refs.entity.openEntity(data);
    },
    query() {
      this.init();
    },
    toDelete(data) {},
    selectionParentChangeHandler(val) {},
    parentRowClick(data) {
      this.$refs.setting.initData(data);
    },
    handleParentCurrentChange(val) {
      this.queryForm.page = val;
      this.init();
    },
    handleParentSizeChange(val) {
      this.queryForm.size = val;
      this.init();
    },
    fetchDataEntity(data) {
      this.init();
    },
    settingBack(data) {}
  }
};
</script>

<style scoped>

</style>
